<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>
            Calculator
        </title><!-- Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

        <script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript">
</script>
        <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript">
</script>
        <script type="text/javascript" src="../js/jquery.flot.min.js">
</script>
    </head>
    <body>
        <form id="sheet1" data-calx-identifier="CALX1448820631867" class="form">
            <!-- Modal -->
            <div class="container">
                <h2>
                    Project
                </h2>Select a tab<br>
                <br>
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active">
                        <a href="#tab1" data-toggle="tab">TAB1</a>
                    </li>
                </ul>
                <div id="printRow">
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <div class="form-group">
                                <div class="inner-addon">
                                    <div class="col-xs-6">
                                        <div id="largeFont"></div><br>
                                        <div id="calculateBy">
                                            <br>
                                            <br>
                                        </div>
                                        <div id="Factors">
                                            Factors
                                        </div><br>
                                        <div id="result">
                                            <div id="accordion3" style="width: 500px;">
                                                <h4 class="B1b" style="position: relative; border: 1px solid #fff; margin: 0; background: #FFFFFF; padding: 4px; border-top-left-radius: 4px; border-top-right-radius: 14px; cursor: default;">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;# of ID Resources
                                                </h4>
                                                <div class="B1" style="position: relative; border: 1px solid #aaa; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top: none; display: none;">
                                                    <br>
                                                    <div style="margin-left: 25px;">
                                                        <div id=""></div># of Available Resources:<a id="icon1" style="margin-right: 5px;" data-toggle="tooltip" title="System Processes consists of Product, process, and/or system stability and completeness"></a><br>
                                                        <span id="slider7" class="col-md-5" style="margin-top: 6px; margin-right: 8px;"></span> <input id="box7" data-cell="" data-format="0.00"><br>
                                                        <div id="rAvailable">
                                                            How many hours each person is available?
                                                        </div><br>
                                                        <div id="dynamicTextBox"></div><br>
                                                    </div><input type="text" id="amount7" readonly style="border: 0; color: #f6931f; font-weight: bold;">
                                                </div><br>
                                                <br>
                                                <span id="slider8" class="col-md-5" style="margin-top: 6px; margin-right: 5px;"></span> <input id="box8" class="form-control input-sm" data-cell="B2" data-format="0.00"><br>
                                                <span id="slider88" class="col-md-5" style="margin-top: 6px; margin-right: 5px;"></span> <input id="box88" class="form-control input-sm" data-cell="B2" data-format="0.00"><br>
                                                <br>
                                                <input type="text" id="amount8" readonly style="border: 0; color: #f6931f; font-weight: bold;"><br>
                                                <input id="amount6" class="form-control input-sm" data-cell="B2" data-format="0.00"><br>
                                            </div>
                                        </div>
                                        <h4 class="l6b" style="position: relative; border: 1px solid #fff; margin: 0; background: #FFFFFF; padding: 4px; border-top-left-radius: 4px; border-top-right-radius: 14px; cursor: default;">
                                            &nbsp;&nbsp;&nbsp;&nbsp; Delivery
                                        </h4>
                                        <div class="l6" style="position: relative; border: 1px solid #aaa; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top: none; display: none;">
                                            <br>
                                            <div style="margin-left: 25px;">
                                                Delivery:<a id="A2" style="margin-right: 5px;" data-toggle="tooltip" title="How much effort will be spent on development "></a><br>
                                                <span id="slider6" class="col-md-5" style="margin-top: 6px; margin-right: 5px;"></span> <input id="box6" class="form-control input-sm" data-cell="B2" data-format="0.00"><br>
                                                <br>
                                                <input type="text" id="Text1" readonly style="border: 0; color: #f6931f; font-weight: bold;"><br>
                                                <input type="text" id="Text2" readonly style="border: 0; color: #f6931f; font-weight: bold;">
                                            </div>
                                        </div>
                                        <h4 class="l7b" style="position: relative; border: 1px solid #fff; margin: 0; background: #FFFFFF; padding: 4px; border-top-left-radius: 4px; border-top-right-radius: 14px; cursor: default;">
                                            Date Selection
                                        </h4>
                                        <div class="l7" style="position: relative; border: 1px solid #aaa; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top: none; display: none;">
                                            <br>
                                            <div style="margin-left: 25px;">
                                                Start Date:<a id="icon9" style="margin-right: 5px;" data-toggle="tooltip" title="Select a your start date"></a><br>
                                                <input id="thedate" type="text"><br>
                                                <br>
                                                Due Date:<a id="A3" style="margin-right: 5px;" data-toggle="tooltip" title="Select your due date"></a><br>
                                                <input id="thedate1" type="text"> <input type="text" id="amount9" readonly style="border: 000000; color: #f6931f; margin-left: 2px; width: 270px;"><br>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <input id="7" class="form-control input-sm" data-cell="X2" data-format="0.00">
                                <table class="table table-stripped table-condensed">
                                    <tbody>
                                        <tr>
                                            <td class="rhead">
                                                1
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="A1">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="B1" value="Delivery">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="C1" value="Complexity">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="D1" value="China">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="E1" value="Russia">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="F1" value="Asia">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="G1" value="Audience">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="H1" value="SME">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="I1" value="Experience">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="J1" value="System Processes">
                                            </td>
                                            <td>
                                                <input class="form-control input-sm" data-cell="K1" value="Materials">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input id="1" class="form-control input-sm" data-cell="A2" value="2002">
                                            </td>
                                            <td></td>
                                            <td>
                                                <input id="3" class="form-control input-sm" data-cell="C2" data-format="0.00">
                                            </td>
                                            <td>
                                                <input id="4" class="form-control input-sm" data-cell="D2" data-format="0.00">
                                            </td>
                                            <td>
                                                <input id="5" class="form-control input-sm" data-cell="E2" data-format="0.00">
                                            </td>
                                            <td>
                                                <input id="6" class="form-control input-sm" data-cell="F2" data-format="0.00">
                                            </td>
                                            <td>
                                                <script type="text/javascript">



                                                        $(function ($) {

                                                            $('#sheet1 .table tr td').hide();
                                                            $('[data-cell="A2"]').parents().andSelf().show();

                                                        });

                                                        var
                                                            form = $('#sheet1'),
                                                            cache_width = form.width(),
                                                            a4 = [995.28, 841.89]; // for a4 size paper width and height


                                                </script>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <form class="form2">
                            <div id="printArea" class="row">
                                <div class="col-md-2">
                                    <div style="width: 250px; height: 250px; float: left;">
                                        <br>
                                        <h4 class="text-center">
                                            Project Allocation
                                        </h4><img id="empty" src="images/emptyDial2.png">
                                        <div data-formula="GRAPH(B2:F2, ['type=doughnut', 'legend=B1:F1'])" style="width: 350px; height: 350px; padding: 0px; position: relative;" data-cell="CALX2"></div>
                                    </div>
                                    <div id="pageRight">
                                        Your factor adjustments total <input type="text" id="amount2" readonly style="border: 0; color: #f6931f; font-weight: light;"><br>
                                        <br>
                                        Your Delivery Total is <input type="text" id="amount10" readonly style="border: 0; color: #f6931f; font-weight: light;"><br>
                                        <br>
                                        Your total project estimate is <input type="text" id="amount11" readonly style="border: 0; color: #f6931f; font-weight: bold;"><br>
                                        <br>
                                        <div id="conversion" class="glyphicon glyphicon-user btn-lg">
                                            &nbsp;X <input type="text" id="amountUser" readonly style="border: 0; color: #f6931f; font-weight: bold;">
                                        </div><br>
                                        <div id="conversion2" class="glyphicon glyphicon-calendar btn-lg">
                                            &nbsp;WEEK(S) <input type="text" id="amountWK" style="border: 0; color: #f6931f; font-weight: bold;">
                                        </div>
                                    </div><br>
                                    <br>
                                    <br>
                                    <br>
                                    <br>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </form>
        <div class="tab-pane" id="tab2">
            Content 2 here.
        </div>
        <div class="tab-pane" id="tab3">
            Content 3 here...
        </div>
        <div class="tab-pane" id="tab4">
            Content 4 here...
        </div>
        <div class="tab-pane" id="tab5">
            Content 4 here...
        </div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <!--<script type="text/javascript" src="js/jquery-calx-2.2.3.js" type="text/javascript"></script>-->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript">
</script><script src="../jquery-calx-2.2.7.js" type="text/javascript">
</script><script type="text/javascript">




        var calc = $('#sheet1').calx();
        var sheet = calc.calx('getSheet');
        var range = sheet.getCellRange('B2', 'K2');

        //for (var a in range) {
        //    range[a].setValue(Math.random(10, 1000) * 100);
        //    range[a].renderComputedValue();
        //}
        //
        console.log(range);

        for (var a in range) {
            if (range[a]) {
                range[a].setValue(0);
                range[a].renderComputedValue();
            }

        }


        sheet.calculate();

        $('#randomize').click(function (e) {

            e.preventDefault();
            var range = sheet.getCellRange('B2', 'K2');

            for (var a in range) {

                range[a].setValue(Math.random(10, 1000) * 100);
                range[a].renderComputedValue();

            }

            sheet.calculate();

        });
        </script>
    </body>
</html>